<template>
    <div class="middle-container" :style="{backgroundImage: bgImg, color: '#38E5DE'}">
        <div class="title-container">
            <div class="title">
                <img src="../../assets/img/common/title_tip.png" height="16" width="16"/>
                <div class="title-text">{{ title }}</div>
            </div>
            <img src="../../assets/img/common/close-16px.png" style="cursor: pointer" @click="closeWindow" height="16" width="16"/>
        </div>
        <div class="content-container">
            <div class="button-container">
                维度：
                <el-select v-model="time" size="mini">
                    <el-option
                        v-for="item in timeDimensionOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                年份：
                <el-select v-model="year" size="mini" :disabled="time === 'year'">
                    <el-option
                        v-for="item in yearOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                统计：
                <el-select v-model="stats" size="mini" :disabled="time === 'year'">
                    <el-option
                        v-for="item in statsOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
<!--                <div v-show="pageType !== 'ranking' && pageType !== 'ns'">-->
<!--                    类型：-->
<!--                    <el-select v-model="filterValue" size="mini">-->
<!--                        <el-option-->
<!--                            v-for="item in filterSzOptions"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value"-->
<!--                        >-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </div>-->
            </div>
            <div class="echarts-container">
                <bar-line-chart-goods-simple class="thrChart" :filter-option="filterOption"></bar-line-chart-goods-simple>
            </div>
        </div>
    </div>
</template>

<script>
import {ref, toRefs} from 'vue'
import BarLineChartGoodsSimple from "@/components/portEconomy/BarLineChartGoodsSimple";
import useGoodsFilterOptions from "@/composables/useGoodsFilterOptions";

export default {
    name: "GoodsMiddleHome",
    components: {BarLineChartGoodsSimple},
    setup() {
        // 初始化筛选条件
        const {yearOptions, timeDimensionOptions, statsOptions, filterOption} = useGoodsFilterOptions();
        const {time, year, stats} = toRefs(filterOption)

        const closeWindow = () => {
            window.AC.HideWindow(6, {});
        }

        return {
            yearOptions,
            timeDimensionOptions,
            statsOptions,
            time,
            year,
            stats,
            filterOption,
            closeWindow
        }
    },
    data() {
        return {
            bgImg: 'url(' + require('../../assets/img/common/middle-bg.png') + ')',
            title: '货物吞吐量'
        }
    },
}
</script>

<style scoped>
.middle-container {
    height: 800px;
    width: calc(1200px - 48px);
    padding-left: 24px;
    padding-right: 24px;
}

.title-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #38E5ED;
}

.title {
    display: inline-flex;
    align-items: center;
}

.title-text {
    margin-left: 5px;
}

.button-container {
    display: inline-flex;
    width: 100%;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.button-container > div {
    margin-right: 10px;
}

.thrChart {
    height: 600px;
}

.el-select {
    width: 100px;
}
</style>
<style>
.el-input__inner {
    background-color: #ffffff00;
    border: 1px solid #38e5de;
    color: #38e5de;
}

.el-select .el-input .el-select__caret,
.el-select:hover .el-input__inner,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > input,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > input{
    color: #38e5de;
    border-color: #38e5de;
}

.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > span > span > i,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > span > span > i{
    background-color: #38e5de00;
    opacity: 0.5;
    cursor: not-allowed;
}
</style>